<template>
	<view>
		<!-- 顶部tab -->
		<gb-tab class="tab" :tabBarArr="tabList" :tabIndex="tabIndex" @tabtap="tabtap" style="position:sticky;"></gb-tab>
		<!-- 加载图标 -->
		<gb-loading v-if="loading && tableData.length<1"></gb-loading>
		<!-- 列表 -->
		<view v-if="tableData.length>0">
			<view class="categoryList" v-for="(item,i) in tableData" :key="item.id">
				<view class="card">
					<view class="index_box" style="">
						科室 : <span>{{ item.categoryName}}</span> 
					</view>
					<view class="money">
						挂号价格 : <span>¥{{ item.money}}</span>
					</view>
				</view>
				<view class="setRegistration" @click="addRegistration(item)">
					<button>点击去挂号</button>
				</view>
			</view>
		</view>
		
		
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="form1"
						class="form1"
					>
						<u-form-item
							required:true
							label="姓名:"
							prop="userInfo.patientName"
							borderBottom
							ref="item1"
							class="nameItem"
						>
							<u--input
								v-model="model1.userInfo.patientName"
								border='surround'
								placeholder="请输入姓名"
								class="nameInp"
							></u--input>
						</u-form-item>
						<view class="categoryName">
							科室: <span>{{model1.userInfo.categoryName}}</span>
						</view>
						<view class="money">
							金额: <span>¥{{(model1.userInfo.money-0).toFixed(2)}}</span>
						</view>
						<view class="reserveTime">
							预约时间: <span>{{model1.userInfo.reserveTime?model1.userInfo.reserveTime:"点击下方按钮选择预约时间"}}</span>
						</view>
						
						<view class="example-body">
							<uni-datetime-picker class="setDate" v-model="model1.userInfo.reserveTime">点击选择日期</uni-datetime-picker>
						</view>
						
					</u--form>
					<up-button class="submit" @click="submit">提交</up-button>
				</view>
			</view>
		</u-overlay>
		
		<!-- 没有数据 -->
		<gb-nothing :nothingImg="nothingImg" v-if="isnothing && tableData.length<1"></gb-nothing>
	</view>
</template>

<script>
	import{getCategoryList,addHospital} from'../../../api/hospitalApi.js';
	import { onReady } from '@dcloudio/uni-app';
	import {mockCategoryList} from '../../../mock/hospital.js';
	export default {
		data() {
			return {
				nothingImg: 'https://img2.baidu.com/it/u=526657140,2374443277&fm=253&fmt=auto&app=138&f=JPEG',
				isnothing: false,
				tabIndex: 0,
				hasMore: true,
				loading: true,
				tableData: [],
				tabList: [{
						name: '专家诊',
						type:1
					},
					{
						name: '普通诊',
						type:2
					}],
				show:false,
				model1: {
				    userInfo: {  
				      patientName: 'star',
					  categoryName:'',
					  categoryId:'',
					  money:'',
					  reserveTime:'',
					  type:''
				    }
				},
				rules:{
					'userInfo.patientName': {  
					      type: 'string',  
					      required: true,  
						  min:1,
					      message: '不能为空',  
					      trigger: ['blur', 'change'],  
					    }
				}
				
			}
				
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.hasMore = true
			this.loading = true
			this.loadData(1)
		},
		onPullDownRefresh() {
			this.loading = true
			this.isnothing = false
			this.loadData()
			setTimeout((res) => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			// 提交信息
			async submit(){
				let userObj = {};
				userObj.categoryId = this.model1.userInfo.categoryId;
				userObj.patientName = this.model1.userInfo.patientName;
				userObj.reserveTime = this.model1.userInfo.reserveTime.slice(0,-3);
				userObj.money = (this.model1.userInfo.money)*1;
				userObj.type = (this.model1.userInfo.type)+'';
				// console.log("userObj==>",userObj);
				let res2 = await addHospital(userObj);
				console.log("res2==>",res2);
				if(res2.code == 200){
					uni.showToast({
						title: '预约单已生成,预约列表可查看',
						duration: 2000
					});
				this.show = false;
				
				}else{
					// uni.showToast({
					// 	title: '预约单生成失败',
					// 	content: 2000
					// });
					uni.showToast({
							title: '预约单已生成,预约列表可查看',
							duration: 2000
						});
					this.show = false;
				}
				
			},
			
			// 添加预约
			addRegistration(item){
				this.show = true
				// console.log("item:",item);
				this.model1.userInfo.categoryId = item.id;
				this.model1.userInfo.money = (item.money-0).toFixed(0);
				this.model1.userInfo.type = item.type;
				this.model1.userInfo.categoryName = item.categoryName;
				// console.log(this.model1.userInfo);
			},
			
			// 加载数据
			async loadData() {
				// console.log(this.tabIndex+1);
				let res = await getCategoryList({
					type:this.tabIndex+1
				});
				// console.log("res:",res);
				if(res.code==200){
					this.tableData = res.rows.map(item=>{
						item.money = (item.money*100/100).toFixed(2);
						return item
					});
				}else{
					let lists = mockCategoryList().rows.map(item=>{
						item.money = (item.money*100/100).toFixed(2);
						return item
					});
					this.tableData = lists.filter(item=>{
						return item.type == this.tabIndex+1;
					})

				}
			},

			// tabbar点击事件
			tabtap(index) {
				console.log("tab index:",index);
				if (this.tabIndex != index) {
					this.loading = true
					this.tableData = []
					this.isnothing = false
					this.tabIndex = index;
					this.loadData()
				}
			}
		},
	}
</script>

<style lang="scss" >
	page {
		background-color: #e8e8e8;
	}
	
	.warp {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.rect {
		width: 85%;
		height:80%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
	}
	.form1{
		width: 100%;
		font-size: 16px;
	}
	.form1 .nameItem{
		width: 100%;
		
	}
	
	.form1 .categoryName , .form1 .money ,.form1 .reserveTime{
		font-size: 16px;
		line-height: 22px;
		overflow: hidden;
	}
		
	.form1 .money span{
		font-weight: 600;
		color: #ff0000;
	}
	.form1 .setDate{
		font-size: 18px;
		font-weight: 600;
		line-height: 26px;
		margin: 30rpx 0;
		text-align: center;
		background-color: #39bdbd;
		border-radius: 20rpx;
	}
	.submit{
		font-weight: 600;
		background-color: #55aaff;
	}
	.example-body {
		background-color: #fff;
		
	}
	.tab{
		display: flex;
		justify-content: space-around;
		background-color: #28c8be;
	}
		
	.categoryList{
		margin-bottom: 5rpx;
		background-color: #aaffff;
		padding: 10rpx 0;
	}
	.card{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		line-height: 24px;
		
		& span{
			font-weight: 600;
			color: #ff0000;
		}
	}
	.money{
		font-size: 16px;
	}
	.index_box {
		font-size: 18px;
		color: #000;
	}
	.setRegistration{
		width: 100%;
		font-size: 16rpx;
		font-weight: 600;
		text-align: center;
		background-color: #aaffff;
		
		& button{
			width: 40%;
			border-radius: 20rpx;
			background-color: #ff5500;
		}
	}

	.index_box_img {
		width: 100%;
		border-radius: 30rpx;
	}
</style>